<template>
	<view class="payalliance-page" v-if="allSKU[payType]">
		<!--标题栏-->
		<view :style="{opacity: opacity}">
			<bar-title bgColor='bg-white'>
				<block slot="content">{{title}}</block>
			</bar-title>
		</view>
		<view class="top-color">
			<view class="back-page">
				<text class="cuIcon-back"></text>
			</view>
		</view>
		
		
		<view class="padding-tb" v-if="payType == 'reserve'">
				
			<view class="top-card bg-white margin-lr margin-top padding-lr">
				<view class="cu-form-group">
					<view class="title">您的姓名</view>
					<input placeholder="必填,方便平台与您沟通"
						maxlength="11"
						name="buyerName"
						data-key="buyerName"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title">您的手机号</view>
					<input placeholder="必填,方便平台与您沟通"
						maxlength="11"
						name="buyerPhone"
						data-key="buyerPhone"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title">店铺名字</view>
					<input placeholder="必填,填写店铺名字" 
						name="shopName"
						data-key="shopName"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title">店铺地址</view>
					<input placeholder="必填,填写店铺地址" 
						name="buyerAddress"
						data-key="buyerAddress"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
			</view>
			
		</view>
		
		<view class="padding-tb" v-else>
				
			<view class="top-card bg-white margin-lr margin-top padding-lr">
				<view class="cu-form-group">
					<view class="title">您的姓名</view>
					<input placeholder="必填,方便平台与您沟通"
						maxlength="11"
						name="buyerName"
						data-key="buyerName"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title">您的手机号</view>
					<input placeholder="必填,方便平台与您沟通"
						maxlength="11"
						name="buyerPhone"
						data-key="buyerPhone"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title">发行名称</view>
					<input placeholder="必填,填写发行名称" 
						name="shopName"
						data-key="shopName"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title">发售剧本</view>
					<input placeholder="必填,填写剧本名称" 
						name="buyerAddress"
						data-key="buyerAddress"
						confirm-type="next"
						@blur="inputChange"
					></input>
				</view>
			</view>
			
		</view>
		
		
		<!-- 商品 -->
		
			
		<view class="goods-section">
			<view class="goods-box margin-bottom">
				<view class="alliance-title text-bold">{{allSKU[payType].title}}</view>
			
				<view class="alliance-img margin-top-sm">
					<image class="response" :src="allSKU[payType].img"  mode="widthFix"></image>
					
				</view>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
		
		<!-- 底部 -->
		<view class="footer text-right" >
			<view class="text-black padding-sm">
				<text class="text-price">{{allSKU[payType].price}}</text>
			</view>
			<text class="submit cu-btn radius" @click="onSubmit">确认订单</text>
		</view>
		
		
	</view>
</template>

<script>

import { alliancePayType } from '@/models/enum.js';
import { Alliance } from '@/models/alliance.js';
import { User } from '@/models/user.js';
let user = new User()
let alliance = new Alliance()
let submitTime;
export default {
	data() {
		return {
			payType: 'reserve',
			opacity: 0,
			bailor: {},
			allSKU: {},
			title: ''
		}
	},
	async onLoad(option) {
		if(option && option.type) {
			this.payType = option.type
		}
		await alliance.getAllSKU()
		this.allSKU = alliance.allSKU
		this.title = alliance.category
	},
	methods: {
		inputChange(event) {
			const key = event.currentTarget.dataset.key;
			this.bailor[key] = event.detail.value;
		},
		async checkOrderParams() {
			if(submitTime) {
				clearTimeout(submitTime)
			}
			return new Promise((resolve, reject) => {
				submitTime = setTimeout( () => {
					let params = {
						...this.bailor
					}
					console.log(params);
					let checkRes = this.$graceChecker.check(params, this.$formRuleConfig.shopAlliance)
					if (!checkRes) {
						this.$mTool.showToast({
							title: this.$graceChecker.error,
							icon: 'none',
							mask: true
						})
					}
					resolve(checkRes)
				}, 100)
			})
		},
		
		
		async onSubmit(event) {
			let checkRes = await this.checkOrderParams()
			if(!checkRes) {return}
			this.$mTool.showLoading('等待支付...')
			
			// debugger
			let loginOpenid =  await user.getTokenFromServer();
			try {
				this.$mTool.hideLoading()
				Alliance.shopAlliancePay({
					...this.bailor,
					payway: 'xcx',
					paymentType: alliancePayType[this.payType],
					openId: loginOpenid
				}).then(res => {
					console.log(res);
					const that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timestamp,
						nonceStr: res.noncestr,
						package: 'prepay_id=' + res.prepayid,
						signType: 'MD5',
						paySign: res.sign,
						success: function (success) {
							that.$mTool.showToast({
								title: '支付成功',
								icon: 'none'
							})
							that.$jumpPages("index")
						},
						fail: function (err) {
							that.$mTool.hideLoading()
							if(err.errMsg == 'requestPayment:fail cancel') {
								that.$mTool.showToast({
									title: '您已取消支付',
									icon: 'none'
								})
							}else{
								that.$mTool.showToast({
									title: '支付失败，请稍后再试',
									icon: 'none'
								})
							}
							
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			} catch (e) {
				this.$mTool.hideLoading()
				that.$mTool.showToast({
					title: '支付失败，请稍后再试',
					icon: 'none'
				})
				this.$jumpPages("index")
			}
	
		},
		stopPrevent(){}
	},
	onPageScroll(e) {
		let lineHeight = uni.upx2px(100)
		if (e.scrollTop <= lineHeight) {
			let num = e.scrollTop/lineHeight;
			this.opacity = num;
		} else {
			this.opacity = 1;
		}
	},
}
</script>

<style lang="scss">
page {
	padding-bottom: 110upx;
}
.top-color{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: 400rpx;
	background-image: linear-gradient(top, #1cbbb4, #f8f8f8);
	.back-page{
		margin-top: var(--status-bar-height);
		margin-left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.6);
		position: relative;
		z-index: 0;
		top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.top-card{
	border-radius: 20rpx;
	overflow: hidden;
	.cu-form-group{
		padding: 0;
		input{
			text-align: right;
			font-size: 24rpx;
		}
	}
	
}

.goods-section {
	background: #fff;
	padding: 40upx 30upx 1px;
	.yt-list {
		background: #fff;
		padding: 20upx 0;
	}
	.yt-list-cell {
		display: flex;
		align-items: center;
		line-height: 50upx;
		position: relative;

	
		.cell-tit {
			flex: 1;
			font-size: 26upx;
			margin-right: 10upx;
		}
	
		.cell-tip {
			font-size: 26upx;
			&.disabled {
				color: $font-color-light;
			}
			&.active {
				color: $base-color;
			}
		}
	}
	
	
}
.footer{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100upx;
	justify-content: flex-end;
	font-size: 24upx;
	background-color: #fff;
	z-index: 998;
	color: $font-color-base;
	box-shadow: 0 -1px 5px rgba(0,0,0,.1);
	.text-price{
		font-size: 36upx;
		color: #FA3A70;
	}
	.submit{
		width: 200upx;
		margin-left: 10upx;
		margin-right: 30upx;
		color: #fff;
		font-size: 30upx;
		background-color: #1cbbb4;
	}
}

/* 优惠券面板 */
.mask{
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0);
	z-index: 9995;
	transition: .3s;
	
	.mask-content{
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: .3s;
		overflow-y:scroll;
	}
	&.none{
		display: none;
	}
	&.show{
		background: rgba(0,0,0,.4);
		
		.mask-content{
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item{
	display: flex;
	flex-direction: column;
	margin: 20upx 24upx;
	background: #fff;
	.con{
		display: flex;
		align-items: center;
		position: relative;
		height: 120upx;
		padding: 0 30upx;
		&:after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #f3f3f3;
			transform: scaleY(50%);
		}
	}
	.left{
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		height: 100upx;
	}
	.title{
		font-size: 32upx;
		color: $font-color-dark;
		margin-bottom: 10upx;
	}
	.time{
		font-size: 24upx;
		color: $font-color-light;
	}
	.right{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: $font-color-base;
		height: 100upx;
	}
	.price{
		font-size: 44upx;
		color: $base-color;
		&:before{
			content: '￥';
			font-size: 34upx;
		}
	}
	.tips{
		font-size: 24upx;
		color: $font-color-light;
		line-height: 60upx;
		padding-left: 30upx;
	}
	.circle{
		position: absolute;
		left: -6upx;
		bottom: -10upx;
		z-index: 10;
		width: 20upx;
		height: 20upx;
		background: #f3f3f3;
		border-radius: 100px;
		&.r{
			left: auto;
			right: -6upx;
		}
	}
}

</style>
